// 运费管理子组件
import { useEffect, useState } from 'react';
import { Button, Modal, message, Form, InputNumber } from 'antd';
import '../../../css/AddorRev.css'
import { revFreightMoney } from '../../../../api/opreationApi'

//参数接口
interface PropsType {
  close(): void,
  isOpen: boolean,
  moeny: number | null
  freight(): void
}


export default function AddorRev(props: PropsType) {
  const [form] = Form.useForm();
  // 初始化
  useEffect(() => {
    //去修改form表单里面的默认值
    form.setFieldsValue({
      moeny: props.moeny,
    })
  }, [props])




  // 对话框部分
  const handleOk = () => {
    props.close()
  };

  const handleCancel = () => {
    props.close()
  };
  // 修改运费金额
  const onFinish = (values: any) => {
    revFreightMoney({ money: values.money }).then(res => {
      props.freight()
      message.success('修改运费成功！')
    }).catch(err => {
      console.log(err);
    })
    props.close()
  };

  return (
    <>
      <Modal title='设置包邮金额' open={props.isOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          {/* 金额 */}
          <Form.Item
            label="金额"
            name="money"
            rules={[{ required: true, message: '请输入包邮金额！' }]}
            initialValue={props.moeny}
          >
            <InputNumber placeholder="请输入包邮金额！" />
          </Form.Item>
          {/* 操作按钮 */}
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className='opreate'>
            <Button type="primary" htmlType="submit" className='submit'>提交</Button>
            <Button type="primary" onClick={handleCancel} className='cancel'>取消</Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
